<template>
  <a-layout class="layout-demo">
    <a-layout-content>
      <div class="layout-demo-content">
        <a-scrollbar
          class="arco-layout-content-scrollbar"
          type="track"
          style="
            height: calc(100vh - var(--header-height) - 50px);
            overflow: auto;
          "
        >
          <draggableVue
            v-model:list="list"
            class="list-group"
            :draggable="false"
          >
          </draggableVue>
        </a-scrollbar>
      </div>
    </a-layout-content>
  </a-layout>
</template>
<script lang="ts">
import { defineComponent, ref, computed, provide, watch } from "vue";
import { IconHome, IconCalendar } from "@arco-design/web-vue/es/icon";
import draggableVue from "@/components/draggable/index.vue";
import { useFormStore } from "@/store/form.ts";
export default defineComponent({
  components: {
    draggableVue,
  },
  setup() {
    const formStore = useFormStore();
    const list = computed(() => {
      let list = draggableBack(formStore.list);
      return list;
    });
    const draggableBack = (list: any = []) => {
      let array = [];
      list.forEach((element) => {
        let children = undefined;
        if (element.children && element.children.length > 0) {
          children = draggableBack(element.children);
        }
        array.push({
          ...element,
          draggable: false,
          children,
        });
      });
      return array;
    };

    return {
      list,
      formStore,
    };
  },
});
</script>
<style lang="scss" scoped>
.list-group {
  padding: 4px;
  border-radius: 4px;
  min-height: 86vh;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  align-content: flex-start;
  box-sizing: border-box;
  overflow: hidden;
}
.layout-demo {
  height: calc(100vh - var(--header-height));
  background: var(--color-fill-2);
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.layout-demo :deep(.arco-layout-content) {
  margin: 16px;
  padding: 16px 16px 12px;
  color: var(--color-text-2);
  border-radius: 4px;
  background-color: var(--color-bg-3);
}
</style>
